<template>
	<div id="diary">
		<!-- 顶部栏 -->
		<div class="diary-topbar">
			<span class="diary-topbar-time">
				{{today}}
			</span>
			<mu-raised-button class="diary-topbar-button" label = "记一条" @click="open('bottom')"></mu-raised-button>
		</div>
		<!-- 日记 -->
		<div class="diary" v-for = "(item,index) in diaryList" @click = "openBottomSheet(index)" >
			<div class="diary-left">
				<div class="feeling">
					<img :src="item.feeling" alt="">
				</div>
				<div class = "">{{item.week}}</div>
			</div>
			<div class="diary-right">
				<div class="date">
					{{item.time}}
				</div>
				<div class="diary-detail">
					{{item.acticle}}
				</div>
			</div>
			<!-- <div class = "list-tool">
				<div>
					<img src="src/assets/image/update.png" alt="">
				</div>
				<div>
					<img src="src/assets/image/delete2.png" alt="">
				</div>
			</div> -->
		</div>

		<!-- 底部弹窗 -->
		<mu-popup position="bottom" popupClass="popup-bottom" :open="bottomPopup" @close="cleanState">
			<div class="writePanel">
				<div class = "writePanel-title">
					{{today}} {{week}}
				</div>
				<textarea v-model = "acticle" name="" id="" cols="30" rows="10" placeholder="请输入日记" class = "" >
				</textarea>
			</div>
			<div class = "feelingPanel">
				<img :src="item.icon" alt="" v-for = "(item,index) in feelingType" @click = "selectFeeling(index)">
			</div>
    		<mu-raised-button class="popup-button" label = "确定" @click="saveAndclose"></mu-raised-button>
		</mu-popup>

		<!-- 底部弹出框模块 -->
		<mu-bottom-sheet :open="bottomSheet" @close="cleanState" sheetClass = "sheetClass">
		    <mu-list @itemClick="closeBottomSheet">
				<mu-list-item title="编 辑" @click = "open('bottom')"/>
				<mu-list-item title="删 除" @click = "deleteDiary"/>
			</mu-list>
	    </mu-bottom-sheet>

	</div>
</template>
<script>
	export default{
		data () {
			return {
				bottomPopup: false,
				bottomSheet: false,
				diaryList: [],
				today: null,
				feelingType: [
					{
		       			iconType: 1,
		       			icon: "src/assets/image/happy.png",
					},
					{
		       			iconType: 2,
		       			icon: "src/assets/image/confuse.png",
					},
					{
		       			iconType: 3,
		       			icon: "src/assets/image/satisfied.png",
					},
					{
		       			iconType: 4,
		       			icon: "src/assets/image/angry.png",
					},
					{
		       			iconType: 5,
		       			icon: "src/assets/image/calm.png",
					},
					{
		       			iconType: 6,
		       			icon: "src/assets/image/sad.png",
					},
				],
				acticle: "",
				feelingIndex: null,
				week: null,
				diaryIndex: null
			}
		},
		methods:{
			open (position) {
				if(this.diaryIndex !== null){
					this.acticle = this.diaryList[this.diaryIndex].acticle
					this.feeling = this.diaryList[this.diaryIndex].feeling
					this.week = this.diaryList[this.diaryIndex].week
		        }
		        this[position + 'Popup'] = true
		    },
		    close (position) {
		        this[position + 'Popup'] = false
		    },
		    closeBottomSheet () {
		        this.bottomSheet = false
		    },
		    openBottomSheet (index) {
		        this.bottomSheet = true
		        this.diaryIndex = index
		    },
		    cleanState: function(){
		    	this.diaryIndex = null
		    	this.bottomSheet = false
		    	this.acticle = null
		    	this.feelingIndex = null
		    	this.close('bottom')
		    	console.log(this.diaryIndex)
		    },
		    selectDiary: function(){
		    	var that = this
		    	this.$http.get('http://127.0.0.1/Vue/account/service/diary.php', {
					params: {
		              type: "select",
		              uid: this.$store.state.uid
		            }
			    }).then(function(res){
			    	that.diaryList = []
			        console.log(res)
			        res.data.forEach(function(item){
			        	var icon = that.getIconImage(item.feeling)
			        	var week = that.getDay(item.time)
			        	that.diaryList.push({
			        		did: item.did,
							time: item.time,
							acticle: item.acticle,
							feeling: icon,
							week: week
			        	})
			        	console.log()
			        })
			    });
		    },
		    //获取心情图片路径
			getIconImage: function(iconType){
				switch(iconType){
		    		case("1") : return "src/assets/image/happy.png";
		    		case("2") : return "src/assets/image/confuse.png";
		    		case("3") : return "src/assets/image/satisfied.png";
		    		case("4") : return "src/assets/image/angry.png";
		    		case("5") : return "src/assets/image/calm.png";
		    		case("6") : return "src/assets/image/sad.png";
		    	}
			},
			//获取今天的时间
		    getToday: function(){
		    	var date = new Date()
				var year = date.getFullYear()
				var month = date.getMonth() + 1
				var day = date.getDate()

				var hour = date.getHours()
				var minute = date.getMinutes()
				var second = date.getSeconds()

				return [year, month, day].join('-')
		    },
		    //获得星期几
		    getDay: function(date){
		    	var a = new Array("日", "一", "二", "三", "四", "五", "六"); 
				var week = new Date(date).getDay(); 
				return "星期"+ a[week];  
		    },
		    //保存日记并关闭弹窗
		    saveAndclose: function(){
		    	if(this.diaryIndex === null){
		    		this.$http.get('http://127.0.0.1/Vue/account/service/diary.php', {
						params: {
			              type: "add",
			              uid: this.$store.state.uid,
			              acticle: this.acticle,
			              feeling: this.feelingType[this.feelingIndex].iconType,
			              time: this.today
			            }
				    }).then(function(res){
				        console.log(res)
				    });
		    	}
		    	else{
		    		this.$http.get('http://127.0.0.1/Vue/account/service/diary.php', {
						params: {
			              type: "update",
			              uid: this.$store.state.uid,
			              did: this.diaryList[this.diaryIndex].did,
			              acticle: this.acticle,
			              feeling: this.feelingType[this.feelingIndex].iconType
			            }
				    }).then(function(res){
				        console.log(res)
				    });
		    	}
		    	this.close('bottom')
		    	this.selectDiary()
		    	this.cleanState()
		    },
		    //选择心情标签
		    selectFeeling: function(index){
		    	this.feelingIndex = index
		    },
		    //删除日记
		    deleteDiary: function(){
		    	this.$http.get('http://127.0.0.1/Vue/account/service/diary.php', {
					params: {
		              type: "delete",
		              uid: this.$store.state.uid,
		              did: this.diaryList[this.diaryIndex].did		            }
			    }).then(function(res){
			        this.selectDiary()
			    });
		    }
		},
		mounted() {
			this.selectDiary()
			this.today = this.getToday()
			console.log()
		}
	}
</script>
<style scoped>
	#diary{
		height: 100vh;
		padding: 56px 2vw 0 2vw;
	}
	.diary-topbar{
		position: relative;
		left: 0;
		top: 0;
		height: 8vh;
		margin: 2vh 0;
	}
	.diary-topbar-time{
		font-size: 0.30rem;
		color: #999;
		position: absolute;
		left: 30px;
		line-height: 8vh;
	}
	.diary-topbar-button{
		position: absolute;
		right: 10px;
		background-color: #fe8745;
		color: white;
		bottom: 15%;
	}
	.diary{
		position: relative;
		display: flex;
		flex-direction: row;
		height: 12vh;
		background-color: #efefef;
		border-radius: 8px;
		margin: 2vh 0;
		overflow: hidden;
		text-align: center;
	}
	.diary-left{
		flex: 1;
		background-color: #ccc;
		padding: .15rem .1rem;
	}
	.feeling>img{
		width: 70%;
		height: auto;
	}
	.diary-right{
		flex: 6;
		background-color: #eee;
	}
	.date{
		font-size: .1rem;
	}
	.diary-right{
		text-align: left;
		padding: .1rem .1rem;
	}
	.writePanel{
		border: 1px solid #5DCDBF;
		border-radius: 8px;
		overflow: hidden;
	}
	.writePanel-title{
		text-align: center;
		color: white;
		background-color: #5DCDBF;
		padding: 2vh; 
		font-size: .4rem;
	}
	.feelingPanel{
		display: flex;
		flex-direction: row;
		width: 100%;
		margin: .2rem 0;
	}
	.feelingPanel > img{
		width: 16vw;
		height: 16vw;
		padding: .1rem;
	}
	.popup-button{
		float: right;
		background-color: #5DCDBF;
		color: white;
	}
	textarea{
		width: 100%;
		border: none;
		padding: .1rem;
		resize: none;
		font-size: .3rem;
	}
	.list-tool{
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		left: 0;
		top: 0;
		width: 100%;
		height: 12vh;
		background-color: rgba(0,0,0,.5);
		border-radius: 8px;
	}
	.list-tool  > div{
		flex: 1;
		height: 100%;
		padding-top: 3vh;
	}
	.list-tool img{
		height: 50%;
		width: auto;
	}
</style>
<style>
	.popup-bottom {
	  width: 100%;
	  top: 20%;
	  padding: 5vh 2vw;
	}
	.sheetClass{
		text-align: center;
	}
</style>
